<template>
    <div class="main">
        <div class="main1">
            <LittleHead>
                <span>总线设备状态</span>
            </LittleHead>
            <DeviceStatus></DeviceStatus>
            <LittleHead>
                <span>总线上下行数据量</span>
            </LittleHead>
            <DataVolume></DataVolume>
        </div>
        <div class="main2">
            <ybp></ybp>
            <ButtoonMy></ButtoonMy>
        </div>
        <div class="main3">
            <LittleHead>
                <span>全部订单</span>
            </LittleHead>
            <dexterHeader></dexterHeader>
            <LittleHead>
                <span>设备运行状态</span>
            </LittleHead>
            <dexterMiddle></dexterMiddle>
            <LittleHead>
                <span>APP列表</span>
            </LittleHead>
            <div class="right_bottom">
                <ul>
                    <li v-for="(itme,index) in 8" :key="index">APP</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import LittleHead from "@/components/LittleHead";
import DeviceStatus from "@/components/comps/DeviceStatus";
import DataVolume from "@/components/comps/DataVolume"

import ybp from "./middle/ybp"
import ButtoonMy from "./middle/ButtoonMy"

import dexterHeader from "./dexter/header"
import dexterMiddle from "./dexter/middle"
    export default {
        name:"Main",
        components:{
            DeviceStatus,LittleHead,DataVolume,
            ybp,ButtoonMy,
            dexterHeader,dexterMiddle
            }
    }
</script>

<style lang="scss" scoped>
.main{
    display: flex;
}
.main1{
    height: 100%;
    width:100%;
    flex:2;
    box-sizing: border-box;
}
.main2{
    height: 100%;
    width:100%;
    flex:4;
    box-sizing: border-box;
}
.main3{
    flex:2
}
.add{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.right_bottom ul {
    margin: 0px;
    padding: 0px;
}
.right_bottom ul li {
    float: left;
    width: 60px;
    height: 60px;
    color: #80a7d1;
    text-align: center;
    line-height: 60px;
    list-style: none;
    border-radius: 5px;
    border: 1px #1f52bb solid;
    box-shadow: 0px 0px 20px #0d318d inset;
    margin: 15px;
    margin-top: 15px;
}
.right_bottom {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    border: 1px solid #019EFF;
}
</style>